<script>
import {getMy, updateMy} from "@/api/MyView";

export default {
  data() {
    return {
      ruleForm: {
        id: '',
        name: '',
        username: '',
        email: '',
        password: '',
        address: '',
        pname: '',
        phone: '',
        dname: '',
      },
      rules: {
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
        ],
        username: [
          {required: true, message: '请输入登录名', trigger: 'blur'},
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {
            pattern: '^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$',
            message: '请输入正确的邮箱格式',
            trigger: 'blur'
          }
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入电话号码', trigger: 'blur'},
          {pattern: '^1[3456789]\\d{9}$', message: '请输入中国正确的电话格式', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请输入地址', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    exitMyView() {
      this.$router.push('/index')
    },
    getMyViewData() {
      let that = this
      getMy().then((res) => {
        if (res.code == 200) {
          that.ruleForm.id = res.data.id
          that.ruleForm.username = res.data.username
          that.ruleForm.password = res.data.password
          that.ruleForm.name = res.data.name
          that.ruleForm.phone = res.data.phone
          that.ruleForm.email = res.data.email
          that.ruleForm.address = res.data.address
          that.ruleForm.pname = res.data.pname
          that.ruleForm.dname = res.data.dname
        }
      })
    },
    onSubmit(formName) {
      let that = this
      that.$refs[formName].validate((valid) => {
        if (valid) {
          updateMy(that.ruleForm).then((res) => {
            if (res.code == 200) {
              that.$message.success(res.message)
              getMy()
            } else {
              that.$message.error(res.message)
            }
          })
        } else {
          that.$message.error("请正确的填写表单各项信息~~~")
          return false;
        }
      });
    }

  },
  created() {
    this.getMyViewData()
  }
}
</script>

<template>
  <div>
    <h3 style="margin-right: 10%">个人中心</h3>

    <div style="margin-left: 10%;margin-top: 5%;width: 800px;text-align: center">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="300px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="登录名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input disabled v-model="ruleForm.dname"></el-input>
        </el-form-item>
        <el-form-item label="岗位">
          <el-input disabled v-model="ruleForm.pname"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('ruleForm')">提交(修改)</el-button>
          <el-button @click="exitMyView">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style>
el-form-item el-input {
  width: 50px;
}
</style>